<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search" >我的简历</div> <!--v-show="status==0"-->
        <img src="../../assets/xg.png" alt="" class="xg" @click="xg" /> <!--v-show="status==0"-->
      </div>
    </div>
    <div class="content">
      <div class="block">
        <div class="block-left">
          <img src="../../assets/avatar.png" alt="" />
          <img :src="imgUrl" v-if="imgUrl !== ''" alt="" />
        </div>
        <div class="block-div">
          <div class="name">{{ycUserResumeEntity.userName}}</div>
          <div>
            <span>年龄：</span>
            {{ycUserResumeEntity.age}}
          </div>
          <div>
            <span>电话：</span>
            <!-- 123****8900 -->
			{{ycUserResumeEntity.tel}}
          </div>
          <div>
            <span>微信：</span>
            <!-- 123***789 -->
			{{ycUserResumeEntity.wechat}}
          </div>
          <div>
            <span>邮箱：</span>
            <!-- 123***789@qq.com -->
			{{ycUserResumeEntity.email}}
          </div>
        </div>
      </div>
	  <!-- 求职意向 -->
      <div class="block"  v-for="item in ycUserIntentionJobList">
        <div class="block-left">
          <span>求职意向</span>
          <div>{{item.positionTitle}}</div>
        </div>
        <div class="block-div">
          <div>
            <span>工作城市：</span>
            <!-- 大连市 -->
			{{item.regionName}}
          </div>
          <div>
            <span>期望薪资：</span>
            <!-- 7-9k -->
			{{item.salaryRange}}
          </div>
          <div>
            <span>求职状态：</span>
            <!-- 离职-暂不考虑 -->
			{{ycUserResumeEntity.jobStatusName}}
          </div>
          <div>
            <span>工作年限：</span>
            <!-- 1-3年 -->
			{{item.workYear}}
          </div>
        </div>
      </div>
	  <!-- 工作经历 -->
      <!-- <div class="blocks" v-for="item in ycUserExperienceList"> -->
	  <div class="blocks">
        <p>工作经历</p>
        <div class="blocks-div">{{ycUserExperienceList.companyName}}</div>
        <div class="blocks-div">
          {{ycUserExperienceList.jobName}}&nbsp;·&nbsp;<span>{{ycUserExperienceList.entryTimes}}至{{ycUserExperienceList.departureTimes}}</span>
        </div>
        <div class="blocks-div1">
          <div class="blocks-title">内容：</div>
          <div class="blocks-test">{{ycUserExperienceList.description}}</div>
        </div>
      </div>
	  <!-- 教育经历 --><!-- 有数据赋值一下  -->
      <div class="blocks" v-for="item in ycUserEducationList">
        <p>教育经历</p>
        <div class="blocks-div">{{item.school}}</div>
        <div class="blocks-div">
          {{item.professional}}&nbsp;·&nbsp;<span>{{item.admissionTimes}}至{{item.graduationTimes}}</span>
        </div>
        <div class="blocks-div1">
          <div class="blocks-title">简介：</div>
          <div class="blocks-test">{{item.description}}</div>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="top">
      <div class="sanjiao"></div>
      <div class="pop-div" @click="go('/usersInformation')">我的信息</div>
      <div class="pop-div" @click="go('/job')">求职意向</div>
      <div class="pop-div" @click="go('/work')">工作经历</div>
      <div class="pop-div" @click="go('/education')">教育经历</div>
    </mt-popup>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  name: "usersResume",
  components: {},
  created() {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getUserId();
	  this.init();
  },
  mounted() {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  },
  // data() 为变量赋值等
  data() {
    return {
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      imgUrl: "",
      popupVisible: false,
      apiURL: this.apiURL,
      userId: localStorage.getItem("userId"),
	    ycUserResumeEntity: {},
	    ycUserIntentionJobList: [],
	    ycUserExperienceList:"",
	    ycUserEducationList: []
    };
  },
  // methods 编写js函数
  methods: {

	init(){
		this.$http({
			method: "get",
			params: {
				userId: this.userId,
			},
			url:this.apiURL+"/userResume/info/"+this.userId,
		}).then(({data}) => {
			//简历基本信息
			this.ycUserResumeEntity = data.ycUserResumeEntity || {};
      this.ycUserIntentionJobList = data.ycUserIntentionJobList;
      console.log("======="+this.ycUserResumeEntity)
		})
	},

    getUserId(){

      if(this.status === 0){
        this.userId = window.localStorage.getItem("userId");
      }
      // else if(this.status == 1){
      //   this.userId = this.$route.params.userId;
      // }
       console.log("BBBB"+ this.userId);
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    go(r) {
      this.$router.push(r);
    },
    xg(){
      this.popupVisible=!this.popupVisible;
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: #3e63a8;
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.xg {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #3e63a8;
}
.clear{
  width: 100%;
  height: 30px;
}
.block {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.block img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.block-div {
  flex: 1;
  display: flex;
  flex-flow: column;
  box-sizing: border-box;
  padding-left: 20px;
}
.block-left {
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 14px;
  width: 100px;
}
.block-left div {
  margin-top: 10px;
  color: #3e63a8;
}
.block-div div {
  font-size: 12px;
  padding: 3px 0;
}
.name {
  font-size: 16px !important;
  font-weight: 900;
  padding-top: 10px;
}
.blocks {
  width: 100%;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
}
.blocks p {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  text-align: center;
}
.blocks .blocks-div {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.blocks-div1 {
  box-sizing: border-box;
  width: 100%;
  padding: 5px 0;
  display: flex;
}
.blocks-title {
  width: 50px;
}
.blocks span {
  font-size: 12px;
  color: #757575;
}
.blocks-test {
  flex: 1;
}
.mint-popup {
  width: 50%;
  height: 150px;
  background: #fff;
  top: 40px;
  left: 73%;
  overflow: visible;
  border-radius: 10px;
}
.sanjiao {
  width: 10px;
  height: 10px;
  background-color: #fff;
  transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  position: absolute;
  top: -5px;
  right: 10px;
}
.pop-div{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
  color: #333;
  height: 25%;
  box-sizing: border-box;
  font-size: 14px;
}
.pop-div:last-child{
  border: 0;
}
.bottom{
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5px 20px;
  align-items: center;
}
.btm-left{
  display: flex;
  flex-flow: column;
  align-items: center;
  font-size: 12px;
}
.btm-left img{
  width: 20px;
}
.btm-right{
  display: flex;
}
.btm-right div{
  background: #3e63a8;
  color: #fff;
  margin-left: 10px;
  border-radius: 10px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 30px;
}
</style>
